<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>World Subway Current Positions</title>
<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?key=AIzaSyAlBFALYZrPPQ3kIj-cPnReQYVvUSfIZTo"></script>
<script type="text/javascript">

 google.load("maps", "3", {"other_params" : "sensor=false"});
 google.setOnLoadCallback(initialize);
 
 function initialize() {
	 mapping('#map_mta', '#time_mta', '/train/mta', 40.720076, -73.924218);
	 mapping('#map_tube', '#time_tube', '/train/tube', 51.555987, -0.171837);
	 mapping('#map_tokyom', '#time_tokyom', '/train/tokyom', 35.715470, 139.775117);
 }

 function mapping(canvas, time, feed, lat, lan) {

	var mapCanvas = $(canvas);
	var map = new google.maps.Map(mapCanvas.get(0), {
	    center: new google.maps.LatLng(lat,lan),
	    zoom: 10,
	    mapTypeId: 'terrain'
	});
	
	$.get(feed, function(data) {
		var tp = eval('(' + data + ')');
		var infowindow = new google.maps.InfoWindow();
		for (var i = 0; i < tp.trains.length; i++) {
			var train = tp.trains[i];
			var icon = {
				url : 'http://maps.google.co.jp/mapfiles/ms/icons/flag.png',
				size : new google.maps.Size(64, 64),
				anchor : new google.maps.Point(0, 32),
				origin : new google.maps.Point(0,0)
			};
	
			var marker = new google.maps.Marker({
				position: new google.maps.LatLng(train.latitude, train.longitude),
				map: map,
				title:train.trainId,
				icon:icon,
				train:train
			});
			google.maps.event.addListener(marker, 'click', function() {
				infowindow.setContent('<ul>'
						+ '<li>ID: ' + this.train.trainId + '</li>'
						+ '<li>Route ID: ' + this.train.routeId + '</li>'
						+ '<li>Trip ID: ' + this.train.tripId + '</li>'
						+ '<li>Direction: ' + this.train.direction + '</li>'
						+ '<li>Kind: ' + this.train.kind + '</li>'
						+ '<li>Bound For: ' + this.train.boundFor + '</li>'
						+ '<li>Stop Status: ' + this.train.stopStatus + '</li>'
						+ '<li>Last Update Time: ' + this.train.lastUpdateTime + '</li>'
						+ '</ul>');
				infowindow.open(map, this);
			});
		}
		$(time).html('at ' + tp.localTime + ' (local time)');
	});
  
}

</script>

</head>
<body>
<div id="map_mta" style="width:680px; height:470px;"></div><span id="time_mta"></span>
<div id="map_tube" style="width:680px; height:470px;"></div><span id="time_tube"></span>
<div id="map_tokyom" style="width:680px; height:470px;"></div><span id="time_tokyom"></span>

</body>
</html>

